<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
      'box-sizing': 'border-box',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: 'white',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">{{ titleText }}</view>
      <view class="head_right">
        <collect
          :keCollect="true"
          :id="detail.id"
          :isShow="is_collect == 0 ? false : true"
          @updateDetail="updateDetail"
        ></collect>
      </view>
    </view>

    <view class="box" :style="{ marginTop: statusBarHeight + 'px' }">
      <view class="detail_item">
        <view class="detail_left">
          <image :src="detail.file_url" mode=""></image>
        </view>
        <view class="detail_right">
          <view class="title"> {{ detail.name }} </view>
          <view class="content_t" > {{ detail.jieshao }} </view>
          <!-- 价格 -->
          <view class="content_price" v-if="detail.price && this.type !=1"> ￥{{ detail.price }} </view>
          <view class="num"> 
            <view>{{ detail.user_count }}人正在学习 </view>
            <view @click="showModal=true;kecheng_jieshao = detail.jieshao" class="num_jieshao" v-if="detail.jieshao">介绍详情<u-icon name="arrow-right"></u-icon></view>
          </view>
        </view>
      </view>
      <view class="box_title" v-if="is_yanxiu > 0">
        学习进度({{ detail.yi_xue }}/{{ detail.total_zhangjie }})
      </view>
      <template v-for="(val, index) in detail.kechengInfo">
        <u-collapse :border="false">
          <u-collapse-item
            title="文档指南"
            name="Docs guide"
            :isLink="val.zidInfo.length > 0"
          >
            <view slot="title" class="u-page__item__title__slot-title head1">
              <view class="head1_left">
                <view class="title1">
                  <view class="renew_view" v-if="val.hongdian"> </view>
                  {{ val.title }}
                  <text class="renew_text" v-if="val.hongdian">更新</text>
                </view>
                <view
                  class="text1"
                  v-if="val.renwu_name || val.address_name || val.tushu_name"
                >
                  <view v-if="val.renwu_name">#{{ val.renwu_name }}</view>
                  <view v-if="val.address_name">#{{ val.address_name }}</view>
                  <view v-if="val.tushu_name">#{{ val.tushu_name }}</view>
                </view>
              </view>
              <view :class="`head1_right${val.is_xue}`" v-show="is_yanxiu > 0">
                {{
                  val.is_xue == 0
                    ? "开始学习"
                    : val.is_xue == 1
                    ? "继续学习"
                    : "已学习"
                }}
              </view>
            </view>
            <!-- <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> -->
            <view
              style="padding-bottom: 24rpx"
              v-for="(item, ind) in val.zidInfo"
              :key="ind"
              @click.stop="toDetail(item)"
            >
              <view
                v-if="item.see_ask >= 0"
                class="box_item"
                :style="{
                  background:
                    val.studyStatus == 0
                      ? '#F7F8FA'
                      : bacMapping[item.see_ask].background,
                  'border-radius': '16rpx',
                }"
              >
                <!-- <text>1 巴蜀人物概述</text>
					  		<view class="">
					  			
					  		</view> -->
                <view class="itme_left">
                  <text
                    :class="
                      val.studyStatus == 0 ? 'left_content' : 'left_content1'
                    "
                    >{{ item.title }}</text
                  >
                  <!-- <view class="left_type" :class="'type_' + item.kecheng_type">
                    {{
                      item.kecheng_type == 0
                        ? "图文"
                        : item.kecheng_type == 1
                        ? "视频"
                        : "音频"
                    }}
                  </view> -->
                </view>
                <view
                  class="item_right"
                  v-if="val.studyStatus != 0 && type == 1"
                  :class="item.see_ask ? 'right_type_1' : 'right_type_0'"
                >
                  {{ bacMapping[item.see_ask].text }}
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </template>
    </view>
    <u-action-sheet
      :actions="list"
      :title="title"
      :show="show"
    ></u-action-sheet>

    <view class="btn_box" v-show="is_yanxiu == 0 && type == 1">
      <view class="btn" @click="showMod = true"> 参与学习 </view>
    </view>
    
    <view class="btn_box" v-show="is_buy == 0 && type == 2">
      <view class="btn" @click="showMod1 = true"> 购买课程 </view>
    </view>

    <u-modal
      :show="showMod"
      :title="modTitle"
      width="640rpx"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @cancel="showMod = false"
      @close="showMod = false"
    >
      <view class="slot-content"> 是否确认参与该课程学习？ </view>
    </u-modal>

    <u-modal
      :show="showMod1"
      :title="modTitle1"
      width="640rpx"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm1"
      @cancel="showMod1 = false"
      @close="showMod1 = false"
    >
      <view class="slot-content"> 是否确认购买该课程？ </view>
    </u-modal>

    <!-- <u-popup :show="showLimits" @close="close" @open="open" :closeable="true">
      <view class="pop_view">
        <view class="pop_title"> 权限 </view>
        <view class="pop_prompt">
          <text>*</text
          >您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益
        </view>
        <view class="pop_price">￥{{ bugPrice }}</view>
        <view class="pop_priceText">当前课程价格</view>
        <view class="pop_btn" v-if="!showOne">
          <view class="to_pay" @click="goPay">单独购买</view>
          <view class="to_member" @click="goVip">去开通会员</view>
        </view>
        <view class="pop_btn1" v-else>
          <view class="to_member" @click="goVip">去开通会员</view>
        </view>
      </view>
    </u-popup> -->
	<floatingBall></floatingBall>


  <u-modal :show="showModal" title="介绍" :content='kecheng_jieshao' @confirm="showModal = false"></u-modal>
  </view>
</template>

<script>
import collect from "@/components/collect.vue"; // 收藏、
export default {
  components: {
    collect,
  },

  data() {
    return {
      title: "",
      statusBarHeight: 0,
      height: 0,
      showModal:false,
      kecheng_jieshao:"",
      studyList: [
        {
          studyStatus: 0,
          name: "巴蜀地区概述",
          renew: false,
          studyText: "已学习",
        },
        {
          studyStatus: 1,
          name: "巴蜀地区概述",
          renew: false,
          studyText: "继续学习",
        },
        {
          studyStatus: 2,
          name: "巴蜀地区概述",
          renew: false,
          studyText: "开始学习",
        },
        {
          studyStatus: 2,
          name: "巴蜀地区概述",
          renew: true,
          studyText: "开始学习",
        },
      ],
      list: [
        {
          name: "1 巴蜀人物概述",
          type: 0,
          type_text: "图文",
          live_id: 1,
          limit: 1,
        },
        {
          name: "1 巴蜀人物概述",
          type: 1,
          type_text: "视频",
          live_id: 2,
          limit: 0,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 3,
          limit: 0,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 4,
          limit: 0,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 5,
          limit: 0,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 6,
          limit: 0,
        },
      ],
      bacMapping: [
        {
          id: 1,
          background: "#F7F8FA",
          text: "免费",
          color: "#55B877",
        },
        {
          id: 2,
          background:
            "linear-gradient(to right, #F7F8FA 0%,#F7F8FA 50%, #8CD7A3 100%)",
          text: "元气驿站",
          color: "#fff",
        },
        {
          id: 3,
          background:
            "linear-gradient(to right, #F7F8FA 0%,#F7F8FA 50%, #FABC81 100%)",
          text: "启初梦谷",
          color: "#fff",
        },
        {
          id: 4,
          background:
            "linear-gradient(to right, #F7F8FA 0%,#F7F8FA 50%, #CFA5E3 100%)",
          text: "青空天台",
          color: "#fff",
        },
        {
          id: 5,
          background:
            "linear-gradient(to right, #F7F8FA 0%,#F7F8FA 50%,#7EC6FF 100%)",
          text: "无极云顶",
          color: "#fff",
        },
        {
          id: 6,
          background:
            "linear-gradient(to right, #F7F8FA 0%,#F7F8FA 50%, #6C87D0 100%)",
          text: "返朴归真",
          color: "#fff",
        },
      ],
      showMod: false,
      showMod1:false,
      modTitle: "确认学习",
      modTitle1:"确认购买",
      content: "是否确认参与该课程学习？",
      show: false, // 模态框显示关闭
      showLimits: false, // 弹出层显示关闭
      titleText: "研修奥义",
      detail: {},
      is_yanxiu: 0,
      bugPrice: "",
      is_collect: 0,
      selectDetail: {},
      type: 1,
      showOne: false,
      is_buy:0,
    };
  },
  onShow: function () {
    this.showLimits = false;
    if (this.type == 1) {
      this.titleText = "研修奥义";
      this.getAoyiDetail();
    } else {
      this.titleText = "大成学堂";
      this.getDachengxuetang();
    }
  },
  onLoad(options) {
    this.type = options.type;
    this.id = options.id;
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    // 模态框确定按钮
    confirm() {
      //   uni.$u.toast("确定啦");
      this.showMod = false;
      this.canyu(this.detail.id);
    },
    // 购买框确认按钮
    confirm1(){
      this.showMod1 = false;
      // this.canyu(this.detail.id);
      this.goPay()
    },
    // 弹出层打开
    open() {
      this.showLimits = true;
      console.log("open");
    },
    // 弹出层关闭
    close() {
      this.showLimits = false;
      console.log("close");
    },
    // 跳转订单页
    goPay() {
      // console.log(this.detail, "当前课程");
      uni.navigateTo({
        url: `/pages/detail/wenOrder?type=${
          this.type
        }&from=kechengDacheng&id=${this.detail.id}`,
      });
    },
    goVip() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 是否可以进详情页
    toDetail(val) {
      console.log("texttext", val);
      this.selectDetail = val;
      this.selectDetail.file_url = this.detail.file_url;
      uni.navigateTo({
        url:
          `/pages/bigResult/myResult_it?id=${val.id}&type=${this.type}&kecheng_id=` +
          this.id, // type:1研修奥义详情   type:2大成学堂详情
      });
      // this.$http
      //   .kechengIf_buy({ id: val.id })
      //   .then((res) => {
      //     if (res.data.user_is_buy) {
      //       uni.navigateTo({
      //         url:
      //           `/pages/bigResult/myResult_it?id=${val.id}&type=${this.type}&kecheng_id=` +
      //           this.id, // type:1研修奥义详情   type:2大成学堂详情
      //       });
      //     } else {
      //       // 判断金额  金额大于零可以单独购买和开会员
      //       if (res.data.see_fee > 0) {
      //         this.showOne = false;
      //       } else {
      //         this.showOne = true;
      //       }
      //       this.showLimits = true;
      //       this.bugPrice = res.data.see_fee;
      //     }
      //     console.log(res, "是否可以查看详情");
      //   })
      //   .catch((error) => {
      //     uni.$u.toast(error);
      //   });

      //   if (limit) {
      //     if (text === "图文") {
      //       uni.navigateTo({
      //         url: "/pages/bigResult/myResult_it",
      //       });
      //     } else if (text === "音频") {
      //       uni.navigateTo({
      //         url: "/pages/bigResult/myResult_au",
      //       });
      //     }
      //   } else {
      //     this.showLimits = true;
      //   }
    },
    // 奥义详情
    getAoyiDetail() {
      this.$http
        .kechengAoyi_info({ id: this.id })
        .then((res) => {
          this.detail = res.data.list;
          this.is_yanxiu = res.data.is_yanxiu;
          this.is_collect = res.data.is_collect;
          console.log(this.detail, "奥义详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 大成学堂
    getDachengxuetang() {
      this.$http
        .kechengDachengxuetang({ id: this.id })
        .then((res) => {
          this.detail = res.data.list;
          this.is_yanxiu = res.data.is_yanxiu;
          this.is_buy = res.data.is_buy
          this.is_collect = res.data.is_collect;
          console.log(this.detail, "大成学堂");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 章节详情
    getKechengInfo(id) {
      this.$http
        .kechengInfo({ id: id })
        .then((res) => {
          //   this.detail = res.data.list;
          //   this.is_yanxiu = res.data.is_yanxiu;
          console.log(res, "章节详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 参与学习
    canyu(kecheng_id) {
      this.$http
        .kechengCanyuyanxiu({ kecheng_id: kecheng_id })
        .then((res) => {
          //   this.detail = res.data.list;
          //   this.is_yanxiu = res.data.is_yanxiu;
          console.log(res, "参与学习");
          uni.$u.toast(res.message);
          if (this.type == 1) {
            this.getAoyiDetail();
          } else {
            this.getDachengxuetang();
          }
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 刷新详情
    updateDetail() {
      if (this.type == 1) {
        this.getAoyiDetail();
      } else {
        this.getDachengxuetang();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}
/deep/ .pop_view {
  padding: 0 30rpx;
  .pop_title {
    display: flex;
    justify-content: center;
    margin: 40rpx 0;
    font-size: 32rpx;
  }
  .pop_prompt {
    padding: 32rpx 30rpx;
    background: #f7f8fa;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #888888;
    text {
      color: #ee6060;
    }
  }
  .pop_price {
    display: flex;
    justify-content: center;
    margin: 40rpx 0 8rpx 0;
    font-size: 48rpx;
    font-weight: 400;
    color: #444444;
  }
  .pop_priceText {
    display: flex;
    justify-content: center;
    margin-bottom: 180rpx;
    font-size: 26rpx;
    color: #888888;
  }
  .pop_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    .to_pay {
      width: 335rpx;
      height: 80rpx;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      border: 1rpx solid #55b877;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #55b877;
    }
    .to_member {
      width: 335rpx;
      height: 80rpx;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      background: #55b877;
    }
  }
  .pop_btn1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    .to_member {
      // width: 335rpx;
      width: 100%;
      height: 80rpx;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      background: #55b877;
    }
  }
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.head1 {
  width: 100%;
  background: #f7f8fa;
  border-radius: 16rpx;
  padding: 8rpx 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .head1_left {
    .title1 {
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #444444;
      display: flex;
      align-items: center;

      .renew_view {
        width: 16rpx;
        height: 16rpx;
        background: #ee6060;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .renew_text {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ee6060;
        margin-left: 16rpx;
      }
    }

    .text1 {
      font-size: 26rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #adadad;
      margin-top: 16rpx;
      display: flex;
    }
  }

  .head1_right0 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;

    color: #444444;
  }

  .head1_right1 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #55b877;
  }

  .head1_right2 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
}

/deep/ .u-cell__body {
  background: #f7f8fa !important;
}

/deep/ .u-collapse-item__content__text {
  padding: 0 !important;
}

/deep/ .u-collapse-item__content {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  padding: 0 !important;
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 150rpx;

  .box_title {
    font-size: 34rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
    padding: 40rpx 0 32rpx;
  }

  .detail_item {
    width: 100%;
    padding: 32rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    background: #f7f8fa;
    margin-bottom: 32rpx;
    .detail_left {
      width: 210rpx;
      height: 210rpx;
      border-radius: 8rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .detail_right {
      flex: 1;
      padding: 16rpx 32rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
      }

      .content_t {
        width: 379rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #adadad;
        // margin-top: 16rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .content_price{
        color: #FF8A4C;
        // margin-top: 16rpx;
      }

      .num {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-top: 37rpx;
        .num_jieshao{
          color: #444444;
          font-weight: 600;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.btn_box {
  width: 100%;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 16rpx 30rpx;
  box-sizing: border-box;
  background: white;
  box-shadow: 0 -1rpx 3rpx -1px rgba(#000000, $alpha: 0.2);

  .btn {
    height: 96rpx;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.box_item {
  width: 100%;
  background: #f7f8fa;
  padding: 0 32rpx;
  height: 108rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // margin-top: 24rpx;
  .itme_left {
    font-size: 30rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    color: #444444;
    display: flex;
    align-items: center;

    .left_content {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #adadad;
    }

    .left_content1 {
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #444444;
    }

    .left_type {
      padding: 4rpx 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      margin-left: 16rpx;
      border-radius: 4rpx;
    }

    .type_0 {
      background: rgba(153, 187, 255, 0.302);
      color: #99bbff;
    }

    .type_1 {
      background: rgba(201, 153, 255, 0.302);
      color: #c999ff;
    }

    .type_2 {
      background: rgba(255, 182, 94, 0.302);
      color: #ffb65e;
    }
  }

  .item_right {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    margin-right: 52rpx;
  }

  .right_type_0 {
    color: #55b877;
  }

  .right_type_1 {
    color: #fff;
  }
}
</style>